<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"授予菜单和权限"}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container">
      <div class=" layui-card">
        <div class="layui-card-body">
          <t-space>
            <t-button v-for="item in appData" :theme="activeCode==item.code?'primary':'default'" @click="switchMenu(item.code)">{{item.name}}</t-button>
          </t-space>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-body mb-20 ">
          <div class="mb-10">
            <t-space>
              <t-button :theme="checkStrictly?'primary':'default'" @click="checkStrictly = true">关闭父子关联</t-button>
              <t-button :theme="!checkStrictly?'primary':'default'" @click="checkStrictly = false">启用父子关联（慎用）</t-button>
            </t-space>
          </div>
          <t-tree ref="treeRef" v-loading="table.loading" :data="table.data" v-model:value="defaultCheckKey" :expand-level="1" :check-strictly="checkStrictly" checkable
                  activable hover line>
            <template #label="{ node }">
              <t-space size="small">
                <div>{{node.label}}</div> <t-tag size="small" :theme="renderType(node).t">{{renderType(node).label}}</t-tag>
              </t-space>
            </template>
          </t-tree>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container ">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/roleMenu/";
  const APP_URL = "sys/app/";
  const MENU_URL = "sys/menu/";
</script>

<script>

  setupVue("#app", {
    setup() {
      const loading = Vue.ref(false);
      const activeCode = Vue.ref('')

      // 获取应用列表
      const appData = Vue.ref([]);
      const fetchApp = () => $fetch(axiosGet, APP_URL + "list", { columnField: "name,code,active", status: "1" }, appData, () => {
        const data = appData.value.find(item => item.active);
        if (data) {
          activeCode.value = data.code;
          fetchMenu(data.code);
        } else if (appData.value.length > 0) {
          activeCode.value = appData.value[0].code;
          fetchMenu(appData.value);
        }
      });

      // 菜单选项
      const treeRef = Vue.ref();
      const table = useTreeTable(true);
      const fetchMenu = (code) => fetchTree(axiosGet, MENU_URL + "treeOption", { columnField: "name,id,pid,application,type", status: "1" }, table, () => {
        switchMenu(code)
      });      // 菜单类型
      const typeOptions = [
        { label: "全部", value: '' }, { label: "目录", value: 0, t: 'primary' }, { label: "菜单", value: 1, t: 'success' },
        { label: "按钮", value: 2, t: "warning" },
      ];
      const renderType = ({ data }) => {
        return typeOptions.find(item => item.value === data.type);
      }

      // 切换菜单
      const switchMenu = (code) => {
        activeCode.value = code;
        setTimeout(() => table.data = table.fixedData.filter(item => item.application === code))
      }

      // 获取角色拥有的菜单
      const defaultCheckKey = Vue.ref([]);
      const ownMenu = () => {
        $fetch(axiosGet, PATH_URL + "/ownMenu", { roleId: ROLE_ID }, null, (res) => {
          if (res.code === 200) {
            defaultCheckKey.value = res.data.map(item => item.menuId);
          }
        })
      }

      // 获取高亮下选中的数据
      const getCheckedValue = () => {
        const nodes = treeRef.value.getItems();
        const items = nodes.filter(item => item.checked);
        return items.map(item => item.value);
      };

      // 保存
      const onSave = () => {
        const menuIds = getCheckedValue();
        $fetch(axiosPost, PATH_URL + "/saveRoleMenu", { roleId: ROLE_ID, menuId: menuIds.join(",") }, null, (res) => {
          $baseAlert(res.msg, () => {
            if (res.code === 200) closeLayer();
          })
        }, loading)
      }

      // 初始化
      const ROLE_ID = getLayerData("roleId");
      init(() => {
        if (ROLE_ID) {
          ownMenu();
          fetchApp();
        } else {
          $baseAlert("未找到角色标识", () => closeBtn.value.close())
        }
      });

      // 关闭父子关联
      const checkStrictly = Vue.ref(true);

      const closeBtn = useCloseBtn();
      return {
        closeBtn,
        appData, switchMenu, activeCode,
        treeRef, table, defaultCheckKey,
        onSave, loading,
        renderType, checkStrictly,
      }

    },
  });
</script>


</body>
</html>
